<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>我的工程</title>
		<link rel="stylesheet" type="text/css" href="../css/vue.css"/>
		<link rel="stylesheet" type="text/css" href="../css/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/materialLibrary.css"/>
		<style>
			
		</style>
	</head>
	<body class="materialLibraryBox">
		<!--公共头部 start-->
		<div class="commonHead">
			<div class="commonHeadLeft">
				<a href="javascript:void(0);"><img src="../img/indexLogo.png" class="houseLogo"/></a>
			</div>
			<div class="commonHeadCenter">
				<ul>
					<li>
						<a>项目圈</a>
					</li>
					<li>
						<a class="active">材料数据库</a>
					</li>
					<li>
						<a>计算工具</a>
					</li>
					<li class="clear"></li>
				</ul>
			</div>
			<div class="commonHeadRight">
				<div class="infoCenter">
					<a href="javascript:void(0);">
						<span class="iconfont-tcl">&#xe643;</span>
						<span class="infoCenterText">消息中心</span>
						<span class="remindCircle"></span>
					</a>
				</div>
				<div class="loginInfo">
					<el-dropdown trigger="click">
						<span class="el-dropdown-link">
						    Kdd<i class="el-icon-caret-bottom el-icon--right"></i>
						</span>
						<el-dropdown-menu slot="dropdown">
						    <el-dropdown-item>账号设置</el-dropdown-item>
						    <el-dropdown-item>退出</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
				<div class="clear"></div>
			</div>
			<div class="clear"></div>
		</div>
		<!--公共头部 end-->
		
		
		<!--内容 start-->
		<div class="computedContent">
			<div class="searchBox">
				<input type="text" id="searchInput" class="searchA" placeholder="搜索品牌 / 类型 / 型号" style="outline: none;"/>
				<div class="closeBox">
					<i class="el-icon-close"></i>
				</div>
			</div>	
			<div class="materialLibrary">
				<div class="materialLibraryMenu">
					<el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :default-openeds="['1']">
				      	<el-submenu index="1">
				        	<template slot="title"><i class="iconfont menuItemIcon">&#xe6e9;</i>化学污染源</template>
					        <el-menu-item index="1-1">门</el-menu-item>
					        <el-submenu index="1-2">
					          	<template slot="title">内墙涂料</template>
					          	<el-menu-item index="1-2-1">涂料</el-menu-item>
					          	<el-menu-item index="1-2-2">腻子</el-menu-item>
					        </el-submenu>
					        <el-submenu index="1-3">
					          	<template slot="title">油漆</template>
					          	<el-menu-item index="1-3-1">绿色油漆</el-menu-item>
					        </el-submenu>
				     	</el-submenu>
				      	<el-menu-item index="2"><i class="iconfont menuItemIcon">&#xe690;</i>放射污染源</el-menu-item>
      					<el-menu-item index="3"><i class="iconfont menuItemIcon">&#xe6a6;</i>颗粒物污染源</el-menu-item>
				    </el-menu>
				</div>
				
				
				<div class="wid100 materialLibraryContent">
					<div class="materialLibraryContentBox">
						<div class="materialLibraryContentTop">
							<div class="selectBox">
								<label>星级</label>
								<template>
								  	<el-select v-model="value1" placeholder="星级类型">
									    <el-option
									      v-for="item in options1"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
								  	</el-select>
								  	<el-select v-model="value2" placeholder="等级">
									    <el-option
									      v-for="item in options2"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
								  	</el-select>
								</template>
							</div>
							<div class="selectBox">
								<label>释放率</label>
								<template>
								  	<el-select v-model="value3" placeholder="小于100">
									    <el-option
									      v-for="item in options3"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
								  	</el-select>
								</template>
							</div>
							<div class="exchange">
								<a class="iconfont mr10 active">&#xe790;</a>
								<a class="iconfont ">&#xe6e5;</a>
							</div>
							<div class="clear"></div>
						</div>
						
						<div class="materialLibraryContentBottom">
							<div class="materialRoomList exchangeShow">
								<div class="listDec">
									<div class="brand">品牌</div>
									<div class="type">类型</div>
									<div class="img">图片</div>
									<div class="model">型号</div>
									<div class="chemistryContent">甲醛</div>
									<div class="chemistryContent">TVOC</div>
									<div class="chemistryContent">苯</div>
									<div class="chemistryContent">甲苯</div>
									<div class="chemistryContent">二甲苯</div>
									<div class="chemistryControl">操作</div>
									<div class="clear"></div>
								</div>
								<div class="materialDec active" v-for='list in form'>
									<div class="brand">{{list.brand}}</div>
									<div class="type">{{list.type}}</div>
									<div class="img">
										<img v-bind:src="list.img"/>
									</div>
									<div class="model">{{list.model}}</div>
									<div class="chemistryContent">{{list.jiaquan}}</div>
									<div class="chemistryContent">{{list.TOVC}}</div>
									<div class="chemistryContent">{{list.ben}}</div>
									<div class="chemistryContent">{{list.jiaben}}</div>
									<div class="chemistryContent">{{list.erjiaben}}</div>
									<div class="chemistryControl"><el-button type="text"><a href="javascript:void(0);" @click="dialogTableVisible = true">查看</a></el-button></div>
									<div class="clear"></div>
								</div>
							</div>
							<div class="sourceList exchangeShow hidden">
								<div class="sourceType" v-for="imgList in imgForm" @click="dialogTableVisible = true">
									<div class="sourceImg">
										<img v-bind:src="imgList.img"/>
									</div>
									<div class="sourceDec">
										<div class="name">{{imgList.brand}} {{imgList.type}} | {{imgList.model}}</div>
										<div class="sourceContent">
											<div class="sourceContentDec">
												<p>甲醛</p>
												<p class="sourceNum">{{imgList.jiaquan}}</p>
											</div>
											<div class="sourceContentDec">
												<p>TOVC</p>
												<p class="sourceNum">{{imgList.TOVC}}</p>
											</div>
											<div class="sourceContentDec">
												<p>苯</p>
												<p class="sourceNum">{{imgList.ben}}</p>
											</div>
											<div class="sourceContentDec">
												<p>甲苯</p>
												<p class="sourceNum">{{imgList.jiaben}}</p>
											</div>
											<div class="sourceContentDec">
												<p>二甲苯</p>
												<p class="sourceNum">{{imgList.erjiaben}}</p>
											</div>
											<div class="clear"></div>
										</div>
									</div>
								</div>
								<div class="clear"></div>
							</div>	
						</div>
					</div>
				</div>
				<div class="clear"></div>
				
				<!--Vue模态框 start-->
				<el-dialog title="材料详情" v-model="dialogTableVisible">
				  	<div class="modalContentBox">
				  		<div class="modalContent">
				  			<div class="imgForm">
				  				<div class="imgBox">
				  					<img src="../img/sourceImg.jpg"/>
				  				</div>
				  				<div class="imgDec">
				  					<div class="decBox">
				  						<label>材料类别</label>
				  						<div class="dec">木地板/实木地板</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>品牌</label>
				  						<div class="dec">美宜佳</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>型号</label>
				  						<div class="dec">dt8999</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>材料类型</label>
				  						<div class="dec">干材料</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>规格</label>
				  						<div class="dec">-</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产商</label>
				  						<div class="dec">万科</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>生产日期</label>
				  						<div class="dec">2017-10-09</div>
				  						<div class="clear"></div>
				  					</div>
				  					<div class="decBox">
				  						<label>检测单位</label>
				  						<div class="dec">检验东莞实验室</div>
				  						<div class="clear"></div>
				  					</div>
				  				</div>
				  				<div class="clear"></div>
				  			</div>
				  			<div class="listForm">
				  				<ul class="wid100">
				  					<li class="listFormTitle">
				  						<div class="listSource">污染源</div>
				  						<div class="release">释放率(mg/m2.h)</div>
				  						<div class="releaseLevel">释放等级</div>
				  						<div class="clear"></div>
				  					</li>
				  					<li class="listFormDec" v-for="modalList in modalForm">
				  						<div class="listSource">{{modalList.source}}</div>
				  						<div class="release">{{modalList.rate}}</div>
				  						<div class="releaseLevel">{{modalList.level}}</div>
				  						<div class="clear"></div>
				  					</li>
				  				</ul>
				  			</div>
				  			<button class="greenBtn fr" @click="successful">取消收藏</button>
				  			<div class="clear"></div>
				  		</div>
				  	</div>
				</el-dialog>
				
				<!--Vue模态框 end-->
				
				
			</div>
		</div>
		<!--内容 end-->
		
		
		
		
		
		<div class="InputHover"></div>
		
	</body>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/vueComponent.js"></script>
	<script type="text/javascript" src="../js/component.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			//获取content最小高度
			var computedContentMinHeight = $(window).innerHeight() - 60;
			$('.computedContent').css('min-height',computedContentMinHeight + 'px');
			
			//获取materialLibrary最小高度
			var materialLibraryMinHeight = $(window).innerHeight() - 152;
			$('.materialLibraryMenu').css({'min-height':materialLibraryMinHeight + 'px','overflow':'hidden'});
			//获取materialLibraryContent宽度
			/*var materialLibraryWidth = $(window).innerWidth() - 220;
			$('.materialLibraryContent').css({'min-height': materialLibraryMinHeight + 'px','width':materialLibraryWidth + 'px'});*/
		});
		$(document).ready(function(){
			//图片列表形式切换控制
			$('.exchange a').each(function(index){
				$(this).click(function(){
					$('.exchange a').removeClass('active').eq(index).addClass('active');
					$('.exchangeShow').addClass('hidden').eq(index).removeClass('hidden');
				});
			});
			
			//搜索框获取焦点和失去焦点的变化控制
			$('#searchInput').focus(function(){
				$(this).removeClass('searchA').addClass('searchB');
				var inputHoverHeight = $(window).innerHeight() - 110;
				$('.InputHover').css('height',inputHoverHeight + 'px').show();
				$('.closeBox').show();
			}).blur(function(){
				$(this).removeClass('searchB').addClass('searchA');
				$('.InputHover').hide();
				$('.closeBox').hide();
			});
		});
		
		var loginInfo = new Vue({
			el:'.loginInfo'
		});
		
		var materialLibrary = new Vue({
			el:'.materialLibrary',
			data:function(){
				return{
					options1: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value1: '',
			        options2: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value2: '',
			        options3: [{
			          value: '选项1',
			          label: '黄金糕'
			        }, {
			          value: '选项2',
			          label: '双皮奶'
			        }, {
			          value: '选项3',
			          label: '蚵仔煎'
			        }, {
			          value: '选项4',
			          label: '龙须面'
			        }, {
			          value: '选项5',
			          label: '北京烤鸭'
			        }],
			        value3: '',
			        form:[
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
						{
							brand:'德尔',
							type:'强化木地板',
							img:'../img/materialImg.jpg',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
					],
					imgForm:[
						{
							img:'../img/sourceImg.jpg',
							brand:'德尔',
							type:'强化木地板',
							model:'GB-300',
							jiaquan:'F1',
							TOVC:'F2',
							ben:'F3',
							jiaben:'F4',
							erjiaben:'F5'
						},
					],
					dialogTableVisible: false,
					modalForm:[
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	},
			        	{
			        		source:'甲醛',
			        		rate:'0.5',
			        		level:'F2'
			        	}
			        ]
				}
			},
			methods: {
			    handleOpen(key, keyPath) {
			        console.log(key, keyPath);
			    },
			    handleClose(key, keyPath) {
			        console.log(key, keyPath);
			    },
			    successful(){
			        this.$message({
			          	message: '取消收藏成功！',
			          	type: 'success'
			        });
			        this.dialogTableVisible = false;
			    },
		    }
		});
	</script>
</html>
